<template>
  <a-modal
    title="退库"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            
            <a-col :md="8" :sm="24" v-if="false">
              <a-form-item label="订单ID">
                <a-input v-model="queryParam.orderId" placeholder="请输入订单ID"/>
              </a-form-item>
            </a-col>
          
          </a-row>
        </a-form>
      </div>
      
      
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="getData"
        :alert="true"
        :showPagination="false"
        :row-selection="rowSelection"
        :rowKey="record=> record.orderId+record.orderMaterialId"
      >
        
        <span slot="action" slot-scope="text, record">
        <a-space>
         <a @click="backStoreRecordModal.show(record)">退库记录</a>
        </a-space>
        </span>
      </s-table>
      
      <back-store-record-modal ref="backStoreRecordModal"/>
      <back-store-edit-form :sourceOrderId="emsOrder.sourceOrderId" ref="backStoreEditForm"
                            @handle-ok="handleOk"
      />
    </a-card>
  </a-modal>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import {STable} from '@/components'

import {page} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'
import BackStoreRecordModal from './backStoreRecordModal.vue'
import BackStoreEditForm from './backStoreEditForm.vue'


type Record = {
  orderMaterialId: string,
  materialId: string,
  materialCode: string,
  materialName: string,
  number: number,
  completedNumber: number,
  returnNumber: number,
}

type EmsOrder = {
  sourceOrderId: string,
}


@Component({
  components: {
    STable,
    BackStoreRecordModal,
    BackStoreEditForm,
  }
})

export default class BackStore extends Vue {
  @Ref() readonly table!: any
  @Ref() readonly backStoreEditForm!: BackStoreEditForm
  @Ref() readonly backStoreRecordModal!: BackStoreRecordModal
  
  visible = false
  
  // 高级搜索 展开/关闭
  advanced = false
  // 查询参数
  queryParam = {
    materialType: '',
    orderId: '',
    pageSize: 10
  }
  
  columns = [
    {
      align: 'center',
      
      title: '序号', width: '80px',
      dataIndex: '',
      customRender(text: any, record: Record, index: number) {
        return `${index + 1}`
      }
    },
    {
      align: 'center',
      
      title: '包材编号',
      dataIndex: 'materialCode'
    },
    {
      align: 'center',
      
      title: '包材名称',
      dataIndex: 'materialName',
    },
    {
      align: 'center',
      
      title: '需求数量',
      dataIndex: 'number',
      
    },
    {
      align: 'center',
      title: '已出库数量',
      dataIndex: 'completedNumber'
    },
    {
      align: 'center',
      
      title: '待确认退库数量',
      dataIndex: 'returnNumber',
    },
    {
      align: 'center',
      title: '剩余可退库数量',
      dataIndex: '',
      customRender(text: any, record: Record, index: number) {
        return `${record.completedNumber - record.returnNumber}`
      }
    },
    {
      align: 'center',
      
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'action'}
    }
  ]
  
  extra = {}
  
  selectedRowKeys: string[] = []
  selectedRows: Record[] = []
  
  confirmLoading = false
  emsOrder: Partial<EmsOrder> = {}
  materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.packing.id
  
  rowSelection = {
    getCheckboxProps: (record: Record) => ({
      props: {
        disabled: +record.completedNumber === 0 || ((record.completedNumber - record.returnNumber) === 0),
        name: record.materialCode,
      },
    }),
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.onSelectChange
  }
  
  
  // 加载数据方法 必须为 Promise 对象
  getData(parameter: { pageNo: number, pageSize: number }) {
    this.queryParam.materialType = this.materialType
    this.queryParam.orderId = this.emsOrder.sourceOrderId
    this.queryParam.pageSize = -1
    const params = {
      ...this.queryParam,
      ...parameter,
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  onSelectChange(selectedRowKeys: string[], selectedRows: Record[]) {
    console.log(selectedRowKeys, selectedRows)
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
  
  
  handleSubmit() {
    if (!this.selectedRowKeys.length) {
      return this.$message.info("请选择包材")
    }
    
    
    this.backStoreEditForm.show(this.selectedRows.map(item => item.orderMaterialId))
  }
  
  handleCancel() {
    this.visible = false;
    this.selectedRowKeys = []
    this.selectedRows = []
    this.table.clearSelected()
    
  }
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
